import * as React from 'react'
import { Toast } from 'antd-mobile'
import { NavBar, PayInput } from 'components'
import './index.less'
import { post } from '../../../utils'
import { VerifyView } from '../../../viewComponent'

export default class Authentication extends React.Component<any, any> {
    public render(): JSX.Element {
        return (
            <div className="authentication">
                <VerifyView/>
                <NavBar title="新支付密码" />
                <div className="authentication_label">请设置新密码，用于支付验证</div>
                <div style={{ padding: '0 0.85rem', marginTop: '1.65rem' }}>
                    <PayInput autoFoucs={true} onComplete={this.handleSetPayPsw} />
                    <div className="authentication_label-v">不能是登录密码或连续数字</div>
                </div>
            </div>
        )
    }
    private handleSetPayPsw = (val: string) => {
        const isSetNew = this.props.match.params.isSetNew
        let goStep: number = -1
        Toast.info('提交中...', 0)
        const { userInfo, SET_USER_INFO } = this.props
        post('usersapi/userPayPwdSet', {
            userId: userInfo.id,
            paypwd: val
        }).then((data: any) => {
            Toast.hide()
            const obj = JSON.parse(JSON.stringify(userInfo))
            obj.pay_pwd = 'true'
            SET_USER_INFO(obj)
            if (isSetNew === '0') {
                goStep = -3
            }
            Toast.info('设置成功！', 2, () => { this.props.history.go(goStep) })
        }).catch(() => {
            Toast.hide()
        })
    }
}